<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">电力巡检系统</el-breadcrumb-item>
            <el-breadcrumb-item>杆塔管理</el-breadcrumb-item>
        </el-breadcrumb>

        <!--卡片区-->
        <el-card>
            <!--搜索区-->
            <el-form>

                <el-row :gutter="10">
                    <div>
                        <el-col :span="2" class="task">所属线路:</el-col>
                        <el-col :span="4">
                            <el-select v-model="value" placeholder="请选择">
                                <el-option
                                        v-for="item in options1"
                                        :key="item.value1"
                                        :label="item.label"
                                        :value="item.value1">
                                </el-option>
                            </el-select>
                        </el-col>
                    </div>

                    <div>
                        <el-col :span="2" class="task">是否启用:</el-col>
                        <el-col :span="4">
                            <el-select v-model="value" placeholder="请选择">
                                <el-option
                                        v-for="item in options2"
                                        :key="item.value2"
                                        :label="item.label"
                                        :value="item.value2">
                                </el-option>
                            </el-select>
                        </el-col>
                    </div>
                    <div>
                        <el-button type="primary" @click="getList">查询</el-button>
                        <el-button type="primary" class="add" @click="addtowerVisible=true">
                            <icon class="el-icon-circle-plus-outline"></icon>
                            添加杆塔
                        </el-button>
                    </div>
                </el-row>
            </el-form>

            <!--主体区-->
            <el-table :data="tower" border stripe>
                <el-table-column label="杆塔编号" prop="poleId"></el-table-column>
                <el-table-column label="所属路线" prop="poleAddress"></el-table-column>
                <el-table-column label="状态" prop="poleStatus"></el-table-column>
                <el-table-column label="操作" prop="" width="265px">
                    <template slot-scope="scope">
                        <!-- 停用按钮 -->
                        <el-button type="primary" icon="el-icon-view" size="mini" @click="stopVisible = true">停用
                        </el-button>

                        <!-- 修改按钮 -->
                        <el-button type="primary" icon="el-icon-s-promotion" size="mini"
                                   @click="amendSb(scope.row)">修改
                        </el-button>

                        <!-- 删除按钮 -->
                        <el-button type="warning" icon="el-icon-edit" size="mini" @click="deletewire(scope.row.poleId)">删除
                        </el-button>

                    </template>
                </el-table-column>
            </el-table>

            <!--分页区-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[1, 2, 5, 10]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"></el-pagination>
        </el-card>

        <!--新增-->
        <el-dialog
    title="新增杆塔"
    :visible.sync="addtowerVisible"
    width="50%">
    <!--内容主体区-->
    <el-form :model="addtowerForm" :rules="addtowerFormRules" ref="addtowerFormRef" label-width="70px">
        <el-form-item label="线路编码:" prop="poleId" label-width="100px">
            <el-input v-model="addtowerForm.poleId"></el-input>
        </el-form-item>

        <el-form-item label="线路名称:" prop="poleStatus" label-width="100px">
            <el-input v-model="addtowerForm.poleStatus"></el-input>
        </el-form-item>

    </el-form>
    <!--内容底部区-->
    <span slot="footer" class="dialog-footer">
                <el-button @click="addtowerVisible = false">取 消</el-button>
                <el-button type="primary" @click="addtower">确 定</el-button>
            </span>
    </el-dialog>

        <!--修改对话框-->
        <el-dialog
                title="制定巡检任务"
                :visible.sync="amendVisible"
                width="50%">
            <!--内容主体区-->
            <el-form :model="amendForm" :rules="amendFormRules" ref="amendFormRef" label-width="70px">
                <el-form-item label="线路编码:" prop="poleId" label-width="100px">
                    <el-input v-model="amendForm.poleId"></el-input>
                </el-form-item>

                <el-form-item label="杆塔状态:" prop="poleStatus" label-width="100px">
                    <el-input v-model="amendForm.poleStatus"></el-input>
                </el-form-item>

                <el-form-item label="路线名称:" prop="poleAddress" label-width="100px">
                    <el-input v-model="amendForm.poleAddress"></el-input>
                </el-form-item>

            </el-form>
            <!--内容底部区-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="amendVisible = false">取 消</el-button>
                <el-button type="primary" @click="amend">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
    import qs from "qs";

    export default {
        data() {
            return {
                /*获取用户列表的参数对象, 分页*/
                queryInfo: {
                    query: '',
                    // 当前的页数
                    pagenum: 1,
                    // 当前每页显示多少条数据
                    pagesize: 2
                },
                total: 0,

                options1: [{
                    value: '1',
                    label: '西渭线一线'
                }, {
                    value: '2',
                    label: '西渭线二线'
                }],
                value1: '',

                options2: [{
                    value: '1',
                    label: '启用'
                }, {
                    value: '2',
                    label: '停用'
                }],
                value2: '',

                /*新增*/
                addtowerForm: {
                    poleId: "XW01100001",
                    poleStatus: "启用"
                },
                addtowerVisible: false,

                /*修改*/
                amendForm: {
                    poleId:"XW00000001",
                    poleStatus:"禁用",
                    poleAddress:"东京路"
                },
                amendVisible:false,
                tower:{}
            }
        },
        created() {
            this.getList()
        },
        methods:{
            /*查询*/
            async getList() {
                const {data: res} = await this.axios.get('/pole/list')
                this.tower = res
                console.log(res)
            },

            /*新增*/
            addtower() {
                this.$refs.addtowerFormRef.validate(async valid => {
                    let data = qs.stringify(this.addtowerForm)
                    if (!valid) return

                    /*发起请求*/
                    const {data: res} = await this.$http.post('/pole/add', this.addtowerForm)
                    console.log(res)
                    if (res.code !== 200) {
                        this.$message.error('添加杆塔失败')
                    }
                    this.$message.success('添加杆塔成功')
                    /*隐藏对话框*/
                    this.addtowerVisible = false
                    /*获取列表数据*/
                    this.getList()
                })
            },
            amendSb(amendSb){
                this.amendVisible=true;
                this.amendForm = amendSb
            },
            /*修改*/
            amend(data){
                this.$refs.amendFormRef.validate(async valid => {
                    if (!valid) return
                    /*发器请求*/
                    let data = qs.stringify(this.amendForm)
                    const {data: res} = await this.$http.post('/pole/update',this.amendForm)

                    console.log(res)
                    if (res.code !== 200) {
                        this.$message.error(res.message);
                        return
                    }
                    this.$message.success('修改线路成功')
                    /*隐藏对话框*/
                    this.amendVisible = false
                    /*获取列表数据*/
                    this.getList()
                })
            },

            /*删除*/
            async deletewire(id) {
                // 弹框询问管理员是否删除用户
                const confirmResult = await this.$confirm('此操作将永久删除该杆塔, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err)
                // 如果用户确认删除，则返回值为字符串confirm
                // 如果用户取消删除，则返回值为字符串cancel
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已经取消了删除')
                }
                const {data: res} = await this.$http.post('/pole/delete' ,{'poleId':id})
                console.log(res)
                if (res.code !== 200) {
                    return this.$message.error('删除杆塔失败')
                }
                this.$message.success('删除成功')
                // 刷新列表
                this.getList()
            }
        }
    }
</script>

<style scoped lang="less">
    .task {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .el-row {
        margin-top: 10px;
    }

    .button {
        position: absolute;
        left: 937px;
    }

    .add {
        position: absolute;
        left: 900px;
    }
</style>
